<!--
 * @Author: 黄宇/Hyuishine
 * @Date: 2022-05-13 14:26:02
 * @LastEditors: 黄宇/Hyuishine
 * @LastEditTime: 2024-05-16 09:59:06
 * @Description: 
 * @Email: hyuishine@gmail.com
 * @Company: 3xData
 * @youWant: 服务机构
-->
<template>
  <view class="container_page">

    <!-- 顶部自定义导航栏 -->
    <action-bar :options="navOptions" ref="element" @search="btn_search()" />

    <view class="page">
      <view class="manage_box-num">
        <view class="manage_box-num-span">全部数量： {{ total }}</view>
        <view class="manage_box-num-screen">
          <view class="manage_box-num-screen-option">
            <image :src="baseImgUrl + '/manage/option.png'" mode=""></image>
          </view>
          <span class="manage_box-num-span" @click="open">筛选</span>
          <view class="manage_box-num-screen-traingle">
            <image :src="baseImgUrl + '/manage/triangle.png'" mode=""></image>
          </view>
        </view>
      </view>

      <!-- 主题内容显示 -->
      <view class="manage_box-content" v-if="viewData.length > 0">
        <scroll-view-y @refresh="refresh()" @getMore="getMore()" :pageNo="searchObject.pageNo"
          :pageSize="searchObject.pageSize" :total="total" :height="25">
          <template slot="scrollView_content">
            <view class="main">
              <view class="bar" @click="toForm(bar)" v-for="bar, i in viewData" :key="i">
                <div class="triangle" v-if="bar.state == '已通过' || bar.state == '不通过'"
                  :class="bar.state == '已通过' ? 'yes' : 'no'"></div>
                <view class="flex justify-between" style="width: calc((100% - 56rpx))">
                  <span class="name">
                    {{ bar.name }}
                  </span>
                  <uni-tag :text="bar.state == '已通过' || bar.state == '不通过' ? '已审核' : '未审核'"
                    :type="bar.state == '已通过' || bar.state == '不通过' ? 'success' : 'error'" />
                </view>
              </view>
            </view>
          </template>
        </scroll-view-y>
      </view>
      <no-data v-else text="暂无项目"></no-data>
    </view>

    <!-- 筛选的弹出层 -->
    <uni-popup ref="popup" background-color="#fff">
      <view class="popup-list">
        <uni-section title="筛选" type="circle">
          <form>
            <!-- 审核状态 -->
            <view class="formItem">
              <view class="label">审核状态</view>
              <picker mode="selector" class="content" :range="auditState" range-key="text"
                @change="changeAuditState($event)">
                <view :style="{ color: auditShowState ? '#333' : '#999' }">{{ auditShowState || '请选择审核状态' }}</view>
              </picker>
            </view>

            <!-- 服务机构类型 -->
            <view class="formItem">
              <view class="label">服务机构类型</view>
              <picker mode="selector" class="content" :range="typeRange" range-key="dictLabel"
                @change="changeServerType($event)">
                <view :style="{ color: serverState ? '#333' : '#999' }">{{ serverState || '请选择服务机构类型' }}</view>
              </picker>
            </view>

            <!-- 服务机构名称 -->
            <view class="formItem">
              <view class="label">服务机构名称</view>
              <input type="text" style="text-align: right; flex: 1" v-model="searchObject.name" placeholder="请输入服务机构名称">
            </view>

          </form>
        </uni-section>
        <view class="popup-list-btn">
          <view class="close" @click="sure"> 取消 </view>

          <view class="btn" @click="sure"> 确定 </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>
<script>
import scrollViewY from "@/components/scrollViewY/index";
import { baseImgUrl } from "@/config.js";
let _ = require('lodash')

export default {
  components: { scrollViewY },
  data() {
    return {
      baseImgUrl: baseImgUrl,
      // 导航栏参数
      navOptions: {
        left: {
          icon: 'back'
        },
        center: {
          title: "技术服务机构"
        },
      },
      total: 0,
      viewData: [], // 展示的数据，搜索到、或所有数据
      dataStatus: "刷新", // 用于解决闪烁问题
      searchObject: {
        pageNo: 1,
        pageSize: 20,
        state: "1,2", // 审核状态
        serverType: '', // 服务机构类型
        name: '', // 服务机构名称
      },

      // 审核状态
      auditState: [
        {
          text: "已审核",
          value: '1,2'
        },
        // {
        //   text: '未审核',
        //   value: '0'
        // }
      ],
      typeRange: [], // 服务机构类型
      auditShowState: "已审核", // popup中展示的审核状态
      serverState: null, // popup中展示的服务机构类型

      loading: false,
    }
  },
  provide() {
    return {
      getData: this.getInfoListBefore,
    };
  },
  onLoad(e) {
    this.getServerType()
    this.typeRange.forEach(item => {
      if (item.value == e.serviceType) this.searchObject.serverType = item.value
    })
  },
  onShow() {
    this.searchObject.pageNo = 1
    this.getInfoList()
  },
  methods: {
    // 调用获取列表数据
    getInfoList() {
      // this.viewData = [];
      this.getInfoListBefore().then((res) => {
        this.total = res.total;
        this.viewData = res.items;
      });
    },
    // 列表数据的格式整理
    getInfoListBefore() {
      let data = {
        pageNo: this.searchObject.pageNo,
        pageSize: 20,
        area: 1,
        serviceType: this.searchObject.serverType,
        name: this.searchObject.name || '',
        state: this.searchObject.state
      }
      return new Promise((resolve, reject) => {
        if (this.loading) reject()

        this.loading = true
        uni.showLoading({
          title: '正在加载请稍后',
          mask: true
        });


        if (this.searchObject.state == '1,2') {
          this.$store.dispatch('getReviewedList', data)
            .then(({ data }) => {
              this.dataStatus === "刷新"
                ? (this.viewData = data.items)
                : this.viewData.push(...data.items);
              resolve(data);
            })
            .finally(() => {
              let timer = setTimeout(() => {
                this.loading = false
                uni.hideLoading();
                clearTimeout(timer)
              }, 3000);
            })
        } else if (this.searchObject.state == '0') {
          this.$store.dispatch('getNoReviewedList', data)
            .then(({ data }) => {
              this.dataStatus === "刷新"
                ? (this.viewData = data.items)
                : this.viewData.push(...data.items);
              resolve(data);
            })
            .finally(() => {
              let timer = setTimeout(() => {
                this.loading = false
                uni.hideLoading();
                clearTimeout(timer)
              }, 3000);
            })
        }
      })
    },
    // 获取服务机构类型
    getServerType() {
      this.$getDict('service_organization_type').then(res => {
        this.typeRange = res
      })
    },

    // 跳往 表单页面
    toForm(row) {
      let state = null
      if (row.state != '0') state = 0
      else state = 1
      uni.navigateTo({
        url: '/pages_workTableChild/agency/form?id=' + row.agencyId + "&state=" + state
      })
    },
    // 刷新数据
    refresh() {
      this.dataStatus = "刷新";
      this.auditShowState = this.auditShowState || '已审核' // popup中展示的审核状态
      this.serverState = this.serverState // popup中展示的服务机构类型
      this.searchObject.pageNo = 1;
      this.searchObject.state = this.searchObject.state || '1';
      this.searchObject.serverType = this.searchObject.serverType;
      this.searchObject.name = null
    },
    // 上拉加载
    getMore() {
      if (this.searchObject.pageNo * this.searchObject.pageSize <= this.total) {
        this.dataStatus = "加载更多";
        this.searchObject.pageNo++;
      }
    },
    // 前端 本地搜索
    btn_search() {
      // 搜索前 先恢复
      this.restoreData()
      const mainWords = this.searchObject.mainWords.toLocaleLowerCase()

      if (mainWords) {
        let replaceReg = new RegExp(mainWords, 'ig')
        const allData = _.cloneDeep(this.viewData)

        // 过滤
        let result = allData.filter(row => {

          // 在名字里搜索
          if (row.name.includes(mainWords)) {
            // 将关键词高亮
            row.name =
              row.name.replace(
                replaceReg,
                `<span style="color: #335ac6;font-weight: bolder;">${mainWords}</span>`
              )
            return row
          }
        })

        // 去重
        this.viewData = Array.from(new Set(result))
      } else {
        this.restoreData()
      }
    },

    // 重置显示数据
    // todo 待处理需求逻辑
    restoreData() {
      this.viewData = _.cloneDeep(this.viewData)
    },

    // 切换请求状态时的操作
    changeAuditState(e) {
      this.auditShowState = this.auditState[e.detail.value].text
      this.searchObject.state = this.auditState[e.detail.value].value
    },
    // 状态change
    changeServerType(e) {
      this.serverState = this.typeRange[e.detail.value].dictLabel;
      this.searchObject.serverType = this.typeRange[e.detail.value].dictValue;
    },
    open() {
      this.$refs.popup.open("top");
    },
    // popup的确认按钮
    sure() {
      // 重新请求
      this.searchObject.pageNo = 1
      this.getInfoList()
      // 关闭模态框
      this.$refs.popup.close()
    }
  },
  mounted() {
    this.restoreData()
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

.container_page /deep/ {

  .page {
    justify-content: flex-start;
    flex-direction: column;

    .manage_box-num {
      display: flex;
      justify-content: space-between;
      flex-direction: row;
      align-content: center;
      position: fixed;
      line-height: 100rpx;
      width: 100%;
      height: 100rpx;
      background: $OVERALL_SITUATION_BACKGROUND;
      padding: 0 24rpx;
      top: 80rpx;
      z-index: 9;

      &-span {
        font-size: 24rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #fff;
      }

      &-screen {
        display: flex;
        justify-content: flex-start;
        flex-direction: row;

        &-option {
          width: 29rpx;
          height: 26rpx;
          margin-right: 9rpx;

          image {
            width: 100%;
            height: 100%;
          }
        }

        &-traingle {
          margin-left: 14rpx;
          margin-top: -5rpx;
          width: 14rpx;
          height: 7rpx;

          image {
            width: 100%;
            height: 100%;
          }
        }
      }
    }

    .manage_box-content {
      background: $OVERALL_SITUATION_BACKGROUND_GRADIENT;
      margin-top: 100rpx;
      padding: 0 24rpx
    }

    .header {
      display: flex;

      .selector {
        width: 50%;
      }

      .content {
        flex: 1;
      }
    }

    .main {
      .bar {
        position: relative;
        padding: 24rpx 0;
        border-bottom: 1rpx solid #fff;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;

        &:active {
          background: rgba(51, 90, 198, 0.3);
        }

        .no {
          width: 36rpx;
          height: 36rpx;
          background-image: url('./styles/icon_no.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }

        .yes {
          width: 36rpx;
          height: 36rpx;
          background-image: url('./styles/icon_yes.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }

        .triangle {
          width: 60rpx;
          height: 60rpx;
        }

        .name {
          padding-left: 20rpx;
          max-width: calc(100% - 140rpx);
          display: inline-block;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
}

.popup-list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-top: 80rpx;
  padding: 0 20rpx 20rpx 20rpx;

  /deep/.uni-section {
    margin-top: 0;
  }

  .formItem {
    display: flex;
    align-items: center;
    height: 80rpx;

    .label {
      color: #333;
      font-size: 28rpx;
      font-weight: 400;
      line-height: 36rpx;
      width: 40%;
    }

    .content {
      flex: 1;
      text-align: right;
      font-size: 28rpx
    }

    .uni-input-placeholder {
      font-size: 28rpx
    }
  }

  &-btn {
    height: 80rpx;
    line-height: 80rpx;
    width: 100%;
    display: flex;

    .btn {
      flex: 1;
      text-align: center;
      border-radius: 20rpx;
      background: $OVERALL_CONFIRM_BUTTON_COLOR;
      border-radius: 40rpx;
      color: #fff;
      font-size: 28rpx;
      margin: 0 20rpx;
    }

    .close {
      flex: 1;
      text-align: center;
      border-radius: 20rpx;
      background: $OVERALL_CLOSE_BUTTON_COLOR;
      border-radius: 40rpx;
      color: $OVERALL_SITUATION_BACKGROUND;
      font-size: 28rpx;
      margin: 0 20rpx;
    }

  }
}
</style>